<template>
  <div class="home">
    <v-header :top-menus="topMenus" @change-top-menu="changeTopMenu"></v-header>
    <v-main-wrap :side-menus="sideMenus" :top-menu="currentTopMenu"></v-main-wrap>
  </div>
</template>

<script>
import vHeader from './vHeader'
import vMainWrap from './vMainWrap'

export default {
  name: 'home',
  created: function () {
    var self = this;
    self.$doGet('/admin/menus/main', null, function (resp) {
      if (resp.code === self.global_config.SUCCESS_CODE) {
        self.topMenus = resp.data.topMenus;
        self.sideMenus = resp.data.sideMenus;
        if (resp.data.topMenus && resp.data.topMenus.length > 0) {
          self.currentTopMenu = self.topMenus[0].rightsName;
        }
      }
    });

  },
  components: {
    'v-header': vHeader,
    'v-main-wrap': vMainWrap
  },
  data () {
    return {
      topMenus: [],
      sideMenus: [],
      currentTopMenu: ''
    }
  },
  methods: {
    changeTopMenu: function (topMenuId, topMenuName) {
      var self = this;
      self.$doGet('/admin/menus/side/' + topMenuId, null, function (resp) {
        if (resp.code === self.global_config.SUCCESS_CODE) {
          self.sideMenus = resp.data;
          self.currentTopMenu = topMenuName;
        }
      });
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
